<template>
  <el-card class="list-page">
    <el-form
      :inline="true"
      :model="formInline"
      :label-position="'right'"
      ref="formRef"
      class="demo-form-inline"
      :label-width="'130px'"
    >
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="集采标段名称/编号" prop="purchaseLotLike">
            <el-input
              v-model="formInline.purchaseLotLike"
              placeholder="集采标段名称/编号"
              @change="handleSearch"
              class="width-custom170"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="工程技术组" prop="engineTechnologyGroup">
            <el-select
              v-model="formInline.engineTechnologyGroup"
              placeholder="工程技术组"
              @change="handleSearch"
              class="width-custom170"
              clearable
            >
              <el-option
                class="default-option"
                v-for="item in engineTechnologyGroupList"
                :label="item.dicValue"
                :key="item.dicCode"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="招采进度" prop="attractProgress">
            <el-select
              v-model="formInline.attractProgress"
              placeholder="招采进度"
              @change="handleSearch"
              class="width-custom170"
              clearable
            >
              <el-option
                class="default-option"
                v-for="item in attractProgressList"
                :label="item.dicValue"
                :key="item.dicCode"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="招采方式" prop="attractWay">
            <el-select
              v-model="formInline.attractWay"
              placeholder="招采方式"
              @change="handleSearch"
              class="width-custom170"
              clearable
            >
              <el-option
                class="default-option"
                v-for="item in attractWayList"
                :label="item.dicValue"
                :key="item.dicCode"
                :value="item.dicCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="标段年度" prop="purchaseLotYear">
            <el-date-picker
              v-model="formInline.purchaseLotYear"
              type="year"
              value-format="YYYY"
              placeholder="项目年度"
              class="width-custom170"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目名称/编号" prop="projectLike">
            <el-input
              v-model="formInline.projectLike"
              placeholder="项目名称/编号"
              class="width-custom170"
              @change="handleSearch"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="集采标段负责人" prop="principalId">
            <el-select
              v-model="formInline.principalId"
              clearable
              filterable
              remote
              placeholder="集采标段负责人"
              :remote-method="(e: any) => {
                getPrincipalList(e, 'formInline')
              }"
              class="width-custom170"
            >
              <el-option
                v-for="item in principalList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="formInline.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="handleSearch"
              class="width-custom170"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button
              type="primary"
              @click="addClick"
              v-auth="`/projects/centralizedPurchasing--add`"
            >
              新增
            </el-button>
            <el-button
              type="primary"
              @click="showImport = true"
              v-auth="`/projects/centralizedPurchasing--upload`"
            >
              导入
            </el-button>
            <el-button
              type="primary"
              @click="exportFunc"
              v-auth="`/projects/centralizedPurchasing--export`"
            >
              导出
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="float: right">
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-skeleton
      style="height: calc(100vh - 400px)"
      :rows="8"
      :loading="loading"
      animated
    >
    </el-skeleton>
    <el-table
      :data="tableData"
      stripe
      v-show="!loading"
      style="width: 100%; margin-top: 20px"
      :height="'calc(100vh - 400px)'"
      row-key="id"
      ref="tableRef"
      @selection-change="selectionChange"
      :header-cell-style="{
        background: '#F7F9FD',
        color: '#000',
        height: '48px',
        borderTop: '1px soild #E4E8F2'
      }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="selection" :reserve-selection="true" width="35" />
      <el-table-column type="index" label="序号" width="50" fixed="left">
        <template v-slot="scope">
          <span>{{
            (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="purchaseLotName"
        label="设备工程部集采标段名称"
        width="180"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="purchaseLotNum"
        label="设备工程部集采标段编号"
        width="180"
        fixed="left"
      ></el-table-column>
      <el-table-column
        prop="engineTechnologyGroupDesc"
        label="工程技术组"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="attractWayDesc"
        label="招采方式"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="reviewWayDesc"
        label="评审方式"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="attractProgressDesc"
        label="招采进度"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="purchaseLotYear"
        label="集采标段年度"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="lotAmount"
        label="集采标段总金额(万元)"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="principalName"
        label="设备工程部集采标段负责人"
        width="250"
      ></el-table-column>
      <el-table-column label="关联项目" width="180">
        <template #default="{ row }">
          <el-button
            type="text"
            class="shot-text"
            @click="checkProjectClick(row)"
          >
            共{{ row.projectCount || 0 }}个项目
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="附件" width="180">
        <template #default="{ row }">
          <el-button
            type="text"
            class="shot-text"
            @click="uploadFileClick(row, 'detail')"
          >
            共{{ row.documentCount || 0 }}个文件
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="createUserName"
        label="创建人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="160"
      ></el-table-column>
      <el-table-column label="操作" width="360" fixed="right">
        <template #default="{ row }">
          <el-popconfirm
            :title="`是否删除标段：${row.purchaseLotName}？`"
            @confirm="deleteClick(row)"
          >
            <template #reference>
              <el-button
                type="text"
                color="#F56C6C"
                v-auth="`/projects/centralizedPurchasing--delete`"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
          <el-button
            type="text"
            @click="updateClick(row)"
            v-auth="`/projects/centralizedPurchasing--update`"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            @click="associatedItemClick(row)"
            v-auth="`/projects/centralizedPurchasing--associated`"
          >
            关联项目
          </el-button>
          <el-button
            type="text"
            @click="progressDialogClick(row, 'change')"
            v-auth="`/projects/centralizedPurchasing--progress`"
          >
            更新进度
          </el-button>
          <el-button type="text" @click="progressDialogClick(row, 'detail')">
            进度记录
          </el-button>
          <el-button type="text" @click="uploadFileClick(row, 'change')">
            上传附件
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch(formInline.pageNum)"
    />
    <el-dialog
      v-model="dialogForm.visible"
      :title="dialogForm.title"
      destroy-on-close
      width="720px"
      @close="handleCancel"
    >
      <el-form
        ref="dialogFormRef"
        :model="formState"
        :rules="Rules"
        label-width="250px"
        class="doc-dia"
      >
        <el-form-item label="设备工程部集采标段名称：" prop="purchaseLotName">
          <el-input
            class="width-custom"
            v-model="formState.purchaseLotName"
            clearable
            placeholder="设备工程部集采标段名称"
          />
        </el-form-item>
        <el-form-item label="设备工程部集采标段编号：" prop="purchaseLotNum">
          <el-input
            class="width-custom"
            v-model="formState.purchaseLotNum"
            clearable
            disabled
            placeholder="设备工程部集采标段编号"
          />
        </el-form-item>
        <el-form-item label="工程技术组：" prop="engineTechnologyGroup">
          <el-select
            class="width-custom"
            v-model="formState.engineTechnologyGroup"
            placeholder="工程技术组"
            clearable
          >
            <el-option
              v-for="item in engineTechnologyGroupList"
              :label="item.dicValue"
              :key="item.dicCode"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="招采方式：" prop="attractWay">
          <el-select
            class="width-custom"
            v-model="formState.attractWay"
            placeholder="招采方式"
            clearable
          >
            <el-option
              v-for="item in attractWayList"
              :label="item.dicValue"
              :key="item.dicCode"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评审方式：" prop="reviewWay">
          <el-select
            class="width-custom"
            v-model="formState.reviewWay"
            placeholder="评审方式"
            clearable
          >
            <el-option
              class="default-option"
              v-for="item in reviewWayList"
              :label="item.dicValue"
              :key="item.dicCode"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集采标段年度：" prop="purchaseLotYear">
          <el-date-picker
            :disabled="dialogForm.type === 'update'"
            class="width-custom"
            v-model="formState.purchaseLotYear"
            type="year"
            value-format="YYYY"
            placeholder="集采标段年度"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="设备工程部集采标段负责人：" prop="principalId">
          <el-select
            class="width-custom"
            v-model="formState.principalId"
            clearable
            filterable
            remote
            placeholder="设备工程部集采标段负责人"
            :remote-method="(e: any) => {
              getPrincipalList(e, 'formState')
            }"
          >
            <el-option
              v-for="item in formStatePrincipalList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSure">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <AssociatedItem
      :showDialog="showDialog"
      :pitchDetail="pitchDetail"
      @submit="associatedItemSubmit"
    ></AssociatedItem>
    <ProgressRecord
      :showDialog="showProgressDialog"
      :pitchDetail="pitchDetail"
      :progressType="progressType"
      @submit="progressSubmit"
    ></ProgressRecord>
    <UploadFile
      :showDialog="showUploadFile"
      :pitchDetail="pitchDetail"
      :uploadFileType="uploadFileType"
      @submit="uploadFileSubmit"
    ></UploadFile>
    <ProjectDetail
      :showDialog="showProjectDetail"
      :pitchDetail="pitchDetail"
      @submit="projectDetailSubmit"
    ></ProjectDetail>
    <ImportDom
      v-if="showImport"
      ref="importRef"
      @cancel="showImport = false"
      @submit="submitImport"
    ></ImportDom>
  </el-card>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent, onMounted } from "vue";
import NotifMessage from "/@/utils/message/notification";
import RePagination from "/@/components/RePagination/index.vue";
import AssociatedItem from "./components/associatedItem.vue";
import ProgressRecord from "./components/progressRecord.vue";
import ProjectDetail from "./components/projectDetail.vue";
import UploadFile from "./components/uploadFile.vue";
import ImportDom from "./components/import.vue";
import {
  groupPurchaseLotList,
  groupPurchaseLotAdd,
  groupPurchaseLotUpdate,
  groupPurchaseLotDelete,
  groupPurchaseLotImport
} from "/@/api/projects";
import { postDictList } from "/@/api/home";
import { getUserList } from "/@/api/user";
import { exportExcel } from "/@/utils/file";
export default defineComponent({
  name: "section",
  components: {
    RePagination,
    AssociatedItem,
    ProgressRecord,
    UploadFile,
    ProjectDetail,
    ImportDom
  },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const dialogFormRef = ref<HTMLFormElement | null>(null) as any;
    const importRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10,
      purchaseLotLike: "",
      engineTechnologyGroup: "",
      attractProgress: "",
      attractWay: "",
      purchaseLotYear: "",
      projectLike: "",
      principalId: "",
      createTime: []
    });

    let engineTechnologyGroupList = ref([]);
    let attractProgressList = ref([]);
    let attractWayList = ref([]);
    let reviewWayList = ref([]);
    let principalList = ref([]);
    let formStatePrincipalList = ref([]);
    let fileItem = ref({});
    let showDialog = ref(false);
    let showProgressDialog = ref(false);
    let showUploadFile = ref(false);
    let showProjectDetail = ref(false);
    let showImport = ref(false);
    let pitchDetail = ref({});
    let progressType = ref("");
    let uploadFileType = ref("");
    let selectRows = ref([]);

    let dialogForm = ref({
      visible: false,
      title: "新增集采标段",
      type: "add"
    });
    let formState = reactive({
      purchaseLotName: "",
      purchaseLotNum: "",
      engineTechnologyGroup: "",
      attractWay: "",
      reviewWay: "",
      purchaseLotYear: "",
      principalId: ""
    });
    const Rules = {
      purchaseLotName: [
        {
          required: true,
          message: "请输入设备工程部集采标段名称",
          trigger: "blur"
        }
      ],
      engineTechnologyGroup: [
        { required: true, message: "请选择工程技术组", trigger: "change" }
      ],
      attractWay: [
        { required: true, message: "请选择招采方式", trigger: "change" }
      ],
      reviewWay: [
        { required: true, message: "请选择评审方式", trigger: "change" }
      ],
      purchaseLotYear: [
        { required: true, message: "请选择集采标段年度", trigger: "change" }
      ],
      principalId: [
        {
          required: true,
          message: "请选择设备工程部集采标段负责人",
          trigger: "change"
        }
      ]
    };

    let filterText = ref("");
    const deptList = ref([]);
    let defaultProps = ref({
      children: "children",
      label: "deptDescShrt"
    });
    let showDeptList = ref(false);

    let state = reactive({
      tableData: []
    }) as any;

    onMounted(() => {
      getDictList("engine_technology_group"); // 工程技术组
      getDictList("attract_way"); // 招采方式
      getDictList("attract_progress"); // 招采进度
      getDictList("review_way"); // 评审方式
      getPrincipalList("", "formInline");
      getPrincipalList("", "formState");
      getTableData(formInline);
    });
    const getPrincipalList = (nameLike = "", type: string) => {
      if (!nameLike) {
        principalList.value = [];
        return;
      }
      getUserList({
        nameLike,
        pageNum: 1,
        pageSize: 100
      }).then((res: any) => {
        const { data, code } = res;
        if (code === 200) {
          const arr = data.list.map((item: any) => {
            return {
              value: item.id,
              label: `${item.name}(${item.userName})`
            };
          });
          if (type === "formInline") {
            principalList.value = arr || [];
          } else {
            formStatePrincipalList.value = arr || [];
          }
        }
      });
    };
    const getDictList = (dicType: string) => {
      postDictList({ dicType }).then((res: any) => {
        const { data, code } = res;
        if (code === 200) {
          switch (dicType) {
            case "engine_technology_group":
              engineTechnologyGroupList.value = data || [];
              break;
            case "attract_way":
              attractWayList.value = data || [];
              break;
            case "attract_progress":
              attractProgressList.value = data || [];
              break;
            case "review_way":
              reviewWayList.value = data || [];
              break;
          }
        }
      });
    };

    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
      getTableData(formInline);
    };

    // 根据条件进行搜索
    const handleSearch = (page?: any) => {
      if (!page) {
        formInline.pageNum = 1;
      }
      getTableData(formInline);
    };

    //获取列表
    const getTableData = async (obj: any) => {
      const { createTime } = obj;
      loading.value = true;
      try {
        let createTimeStrStart = undefined;
        let createTimeStrEnd = undefined;
        if (createTime && createTime.length > 0) {
          createTimeStrStart = createTime[0];
          createTimeStrEnd = createTime[1];
        }
        const { code, data } = (await groupPurchaseLotList({
          ...obj,
          createTimeStrStart,
          createTimeStrEnd
        })) as any;
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    const addClick = () => {
      dialogForm.value.type = "add";
      dialogForm.value.visible = true;
      dialogForm.value.title = "新增集采标段";
      formStatePrincipalList.value = [];

      fileItem.value = {};
      formState.purchaseLotName = "";
      formState.purchaseLotNum = "";
      formState.engineTechnologyGroup = "";
      formState.attractWay = "";
      formState.reviewWay = "";
      formState.purchaseLotYear = "";
      formState.principalId = "";
    };

    const updateClick = (row: any) => {
      dialogForm.value.type = "update";
      dialogForm.value.visible = true;
      dialogForm.value.title = "编辑集采标段";
      formStatePrincipalList.value = [];

      fileItem.value = {
        ...row
      };
      formState.purchaseLotName = row.purchaseLotName;
      formState.purchaseLotNum = row.purchaseLotNum;
      formState.engineTechnologyGroup = row.engineTechnologyGroup.toString();
      formState.attractWay = row.attractWay.toString();
      formState.reviewWay = row.reviewWay.toString();
      formState.purchaseLotYear = row.purchaseLotYear;
      formState.principalId = row.principalId;

      const findPrincipal = formStatePrincipalList.value.find(
        val => val.value === formState.principalId
      );
      if (!findPrincipal) {
        formStatePrincipalList.value.unshift({
          label: row.principalName,
          value: row.principalId
        });
      }
    };

    const deleteClick = async (row: any) => {
      const { code } = (await groupPurchaseLotDelete({
        id: row.id
      })) as any;
      if (code === 200) {
        NotifMessage.success("操作成功");
        handleSearch();
      }
    };

    const handleCancel = () => {
      dialogFormRef.value.resetFields();
      dialogForm.value.visible = false;
    };

    const handleSure = async () => {
      const isValid = await new Promise(resolve =>
        dialogFormRef.value.validate(resolve)
      );
      if (!isValid) {
        return;
      }
      const find = formStatePrincipalList.value.find(
        val => val.value === formState.principalId
      );
      const params = {
        ...formState,
        principalName: find.label
      };
      let api = null;
      if (dialogForm.value.type === "add") {
        api = groupPurchaseLotAdd;
      } else {
        params.id = fileItem.value.id;
        api = groupPurchaseLotUpdate;
      }
      const { code } = await api(params);
      if (code === 200) {
        NotifMessage.success("操作成功");
        dialogFormRef.value.resetFields();
        dialogForm.value.visible = false;
        handleSearch();
      }
    };

    const associatedItemClick = (row: any) => {
      showDialog.value = true;
      pitchDetail.value = {
        ...row
      };
    };

    const associatedItemSubmit = (type: string) => {
      showDialog.value = false;
      if (type === "sure") {
        handleSearch();
      }
    };

    const progressDialogClick = (row: any, type: string) => {
      showProgressDialog.value = true;
      pitchDetail.value = {
        ...row
      };
      progressType.value = type;
    };

    const progressSubmit = (type: string) => {
      showProgressDialog.value = false;
      if (type === "sure") {
        handleSearch();
      }
    };

    const uploadFileClick = (row: any, type: string) => {
      if (
        type === "detail" &&
        (!row.documentCount || row.documentCount === 0)
      ) {
        NotifMessage.error(`当前标段未上传附件`);
        return;
      }
      showUploadFile.value = true;
      pitchDetail.value = {
        ...row
      };
      uploadFileType.value = type;
    };

    const uploadFileSubmit = (type: string) => {
      if (type === "update") {
        handleSearch();
        return;
      }
      showUploadFile.value = false;
      if (type === "sure") {
        handleSearch();
      }
    };

    const checkProjectClick = (row: any) => {
      if (!row.projectCount || row.projectCount === 0) {
        NotifMessage.error(`当前标段未关联项目`);
        return;
      }
      showProjectDetail.value = true;
      pitchDetail.value = {
        ...row
      };
      console.log(row);
    };

    const projectDetailSubmit = (type: String) => {
      if (type === "update") {
        handleSearch();
        return;
      }
      showProjectDetail.value = false;
      if (type === "sure") {
        handleSearch();
      }
    };

    const submitImport = async (formData: any) => {
      console.log(formData);
      try {
        const { code, message } = (await groupPurchaseLotImport(
          formData
        )) as any;
        if (code === 200) {
          NotifMessage.success(message);
          showImport.value = false;
          handleSearch();
        } else {
          NotifMessage.error(message || "请重试");
        }
      } catch (err) {
        importRef.value.handleRemove();
      }
    };

    const selectionChange = (rows: any) => {
      selectRows.value = rows;
    };

    const exportFunc = () => {
      const arr = selectRows.value.map(val => val.id);
      let formData: any = null;
      if (arr.length === 0) {
        const { createTime } = formInline;
        let createTimeStrStart = undefined;
        let createTimeStrEnd = undefined;
        if (createTime && createTime.length > 0) {
          createTimeStrStart = createTime[0];
          createTimeStrEnd = createTime[1];
        }
        formData = {
          ...formInline,
          createTimeStrStart,
          createTimeStrEnd
        };
      } else {
        formData = {
          ids: arr
        };
      }
      exportExcel(
        "/snow-admin/projectPurchase/groupPurchaseLot/export",
        formData,
        `工程部集采标段列表`
      );
    };

    return {
      ...toRefs(state),
      total,
      formRef,
      importRef,
      loading,
      formInline,
      filterText,
      deptList,
      defaultProps,
      showDeptList,

      engineTechnologyGroupList,
      attractProgressList,
      attractWayList,
      reviewWayList,
      principalList,
      formStatePrincipalList,
      dialogForm,
      fileItem,
      dialogFormRef,
      formState,
      Rules,
      showDialog,
      showProgressDialog,
      pitchDetail,
      progressType,
      uploadFileType,
      showUploadFile,
      showProjectDetail,
      showImport,
      selectRows,

      handleReset,
      handleSearch,
      getDictList,
      getPrincipalList,
      addClick,
      handleCancel,
      handleSure,
      updateClick,
      deleteClick,
      associatedItemClick,
      associatedItemSubmit,
      progressDialogClick,
      progressSubmit,
      uploadFileClick,
      uploadFileSubmit,
      checkProjectClick,
      projectDetailSubmit,
      submitImport,
      selectionChange,
      exportFunc
    };
  }
});
</script>
<style>
.el-icon-warning {
  color: #e45d5d !important;
}
.width-custom {
  width: 250px !important;
}
.width-custom170 {
  width: 170px !important;
}
</style>
<style lang="scss" scoped>
.shot-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}
.filter-tree:deep {
  &.el-tree {
    position: absolute;
    top: 36px;
    width: 400px;
    max-height: 226px;
    overflow: auto;
    border: 1px solid #e4e8f2;
    z-index: 10;
  }
}
</style>
